<template>
  <img v-if="isShowUI" @click="showContact" src="~/assets/images/home/contact.png" alt="contact" class="contact-img" />
  <q-dialog v-model="dialog" persistent>
    <div class="full-width relative-position">
      <div class="q-pa-md back-box">
        <div class="flex itmes-center justify-center title">
          联系我们
        </div>
        <div class="flex itmes-center justify-center des">
          点击下面联系方式即可复制
        </div>
        <div @click="clipText(contactInfo.phone, true)" class="flex itmes-center info-card">
          <div class="info-card-icon">
            <img style="width: 28px;height: 28px;" src="~/assets/images/home/phone.png" alt="" srcset="">
          </div>
          <div class="column info-card-text">
            <div class="text-title">客服电话</div>
            <div class="text-des">{{ contactInfo.phone }} ({{ contactInfo.workTime }})</div>
          </div>
        </div>
        <div @click="clipText(contactInfo.cEmail)" class="flex itmes-center info-card" style="background: #E6F8EE; margin-top: 12px;">
          <div class="info-card-icon" style="border: 1px solid #0CBF5D;">
            <img style="width: 28px;height: 28px;" src="~/assets/images/home/c-email.png" alt="" srcset="">
          </div>
          <div class="column info-card-text">
            <div class="text-title">投诉邮箱</div>
            <div class="text-des">{{ contactInfo.cEmail }}</div>
          </div>
        </div>
        <div @click="clipText(contactInfo.email)" class="flex itmes-center info-card" style="background: #FEF3E9; margin-top: 12px;">
          <div class="info-card-icon" style="border: 1px solid #EEB154;">
            <img style="width: 28px;height: 28px;" src="~/assets/images/home/email.png" alt="" srcset="">
          </div>
          <div class="column info-card-text">
            <div class="text-title">商务合作邮箱</div>
            <div class="text-des">{{ contactInfo.email }}</div>
          </div>
        </div>
      </div>
      <!-- v-if="!useWxHook().isAnyirongMini()" -->
      <div class="close-btn">
        <img @click="close" style="width: 16px;height: 16px;" src="~/assets/images/public/close.png" alt="">
        <!-- <q-btn @click="close" outline size="sm" padding="xs" round color="grey-8" icon="close" /> -->
      </div>
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Show } from './ContactDialog';
import { useWxHook } from 'src/hooks/wx_hooks';
import { showToast } from 'vant';
import { getConfigApi } from 'src/api/app';
const props = defineProps({
  isShowUI: {
    type: Boolean,
    default: true,
  }
})
type sysConfig = {
  code: string;
  contentInfo: string;
  name: string;
};
const contactInfo = ref({
  phone: '',
  email: '',
  workTime: '',
  cEmail: '',
})
const dialog = ref(false);
onMounted(() => {
  initData()
})
const show: Show = async () => {
  dialog.value = true;
};
const close = () => {
  dialog.value = false;
};
const showContact = () => {
  show()
}
const initData = async () => {
  const res = await Promise.all([
    getConfigApi<sysConfig>({id: 6}),
    getConfigApi<sysConfig>({id: 7}),
    getConfigApi<sysConfig>({id: 8}),
    getConfigApi<sysConfig>({id: 9}),
  ])
  contactInfo.value.phone = res[0].data.contentInfo
  contactInfo.value.workTime = res[1].data.contentInfo
  contactInfo.value.email = res[2].data.contentInfo
  contactInfo.value.cEmail = res[3].data.contentInfo
}
const clipText = (text: string, isPhone: boolean = false) => {
  if(isPhone){
    window.location.href = `tel:${text}`;
    return
  }
  navigator.clipboard.writeText(text).then(() => {
    showToast('复制成功')
    console.log('复制成功');
  }, function (err) {
    showToast('无法复制到剪切板')
    console.error('无法复制到剪切板', err);
  });
}
defineExpose({ show });
</script>

<style lang="scss" scoped>
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  margin: 16px;
}

.back-box {
  background-color: #fff;
  background-image: url(src/assets/images/public/dialog-top.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 4vw;

  .title {
    font-weight: 500;
    font-size: 16px;
    color: #222222;
    line-height: 22px;
  }

  .des {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 17px;
    margin-top: 8px;
    margin-bottom: 20px;
  }

  .info-card {
    margin: 0 4px;
    padding: 12px;
    background: #E9F6FE;
    border-radius: 10px;

    &-text {
      margin-left: 8px;

      .text-title {
        font-weight: 500;
        font-size: 14px;
        color: #222222;
        line-height: 20px;
      }

      .text-des {
        margin-top: 4px;
        font-weight: 400;
        font-size: 11px;
        color: #666666;
        line-height: 16px;
      }
    }

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid #4D6DD4;
    }
  }
}
.contact-img {
  width: 72px;
  height: 72px;
  position: fixed;
  right: 12px;
  top: 52.5%;
}
</style>
